<template>
	<div>
		<div class="yunui-tool-bar">
			<ul>
				<li v-for="(item,index) in buttonItems" :key="index"  @click="onToolbarClickHandler(item)">
					<i :class="item.icon"></i>
					<span>{{item.label}}</span>
				</li>
			</ul>
			<div style="clear: both;"></div>
		</div>
		<div>
			<el-row style="margin-top: 5px;width: 100%;">
				<el-col class="field-label" :span="2">表名</el-col>
				<el-col :span="4">
					<el-input v-model="tableName" size="mini"></el-input>
				</el-col>
				<el-col class="field-label" :span="2">名称</el-col>
				<el-col :span="4">
					<el-input v-model="name" size="mini"></el-input>
				</el-col>
				<el-col class="field-label" :span="2">包名</el-col>
				<el-col :span="4">
					<el-input v-model="packageName" size="mini"></el-input>
				</el-col>
				<el-col class="field-label" :span="2">扩展表</el-col>
				<el-col :span="4">
					<el-select v-model="extendsTable" filterable placeholder="请选择" size="mini" clearable>
						<el-option v-for="item in tableList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row style="margin-top: 5px;width: 100%;">
				<el-col :span="2" class="field-label">抽象表</el-col>
				<el-col :span="4">
					<el-checkbox v-model="abstractTable" style="height: 24px;"></el-checkbox>
				</el-col>
				<el-col :span="2" class="field-label">视图</el-col>
				<el-col :span="4">
					<el-checkbox v-model="view" style="height: 24px;"></el-checkbox>
				</el-col>
				<el-col :span="2" class="field-label">自动创建表</el-col>
				<el-col :span="4">
					<el-checkbox v-model="auto" style="height: 24px;"></el-checkbox>
				</el-col>
				<el-col :span="2" class="field-label">访问方式</el-col>
				<el-col :span="4">
					<el-select v-model="accessType" filterable placeholder="请选择" size="mini" clearable>
						<el-option v-for="item in accessTypeList" :key="item.value" :label="item.name"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="列" name="column">
				<div>
					<el-button size="mini" @click="onColumnNewClickHander()">新建列</el-button>
				</div>
				<div>
					<el-table stripe border show-overflow-tooltip="true" :data="columnList" style="width: 100%"
						size="mini">
						<el-table-column label="操作" width="50">
							<template #default="scope">
								<a @click="onColumnDeleteHandler(scope.row)"
									style="display:inline-block;margin-left: 5px;" class="link-button">删除</a>
							</template>
						</el-table-column>
						<el-table-column label="列名" prop="columnName" width="180">
							<template v-slot="scope">
								<el-input v-model="scope.row.columnName" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="名称" prop="name" width="120">
							<template v-slot="scope">
								<el-input v-model="scope.row.name" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="数据类型" width="120">
							<template v-slot="scope">
								<el-select v-model="scope.row.dataType" filterable placeholder="请选择" size="mini"
									clearable>
									<el-option v-for="item in dataTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="类型" width="120">
							<template v-slot="scope">
								<el-select v-model="scope.row.viewType" filterable placeholder="请选择" size="mini"
									clearable>
									<el-option v-for="item in columnViewTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="长度" prop="length">
							<template v-slot="scope">
								<el-input v-model="scope.row.length" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="精度" prop="precision">
							<template v-slot="scope">
								<el-input v-model="scope.row.precision" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="SQL类型" prop="sqlType" width="120">
							<template v-slot="scope">
								<el-select v-model="scope.row.sqlType" filterable placeholder="请选择" size="mini"
									clearable>
									<el-option v-for="item in sqlTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="非空" prop="notNull">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.notNull"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="主键" prop="primaryKey">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.primaryKey"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="唯一" prop="unique">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.unique"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="父列" prop="parentColumn">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.parentColumn"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="编码列" prop="parentColumn">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.codeColumn"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="名称列" prop="nameColumn">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.nameColumn"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="导出列" prop="exportColumn">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.exportColumn"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="存储" prop="storeColumn">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.storeColumn"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="日志" prop="allowLogging">
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.allowLogging"  style="height: 24px;">
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="默认值" prop="defaultValueExpression" width="200">
							<template v-slot="scope">
								<el-input v-model="scope.row.defaultValueExpression" size="mini" type="textarea">
								</el-input>
							</template>
						</el-table-column>
						<el-table-column label="必填" prop="requiredExpression" width="200">
							<template v-slot="scope">
								<el-input v-model="scope.row.requiredExpression" size="mini" type="textarea"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="只读" prop="readOnlyExpression" width="200">
							<template v-slot="scope">
								<el-input v-model="scope.row.readOnlyExpression" size="mini" type="textarea"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="字典" prop="dict" width="150">
							<template v-slot="scope">
								<el-select placeholder="请选择" v-model="scope.row.dict" clearable filterable size="mini">
									<el-option v-for="item in dictList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="引用表" prop="refTable" width="150">
							<template v-slot="scope">
								<el-select placeholder="请选择" v-model="scope.row.refTable" clearable filterable
									size="mini">
									<el-option v-for="item in tableList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="值列" prop="valueColumn" width="100">
							<template v-slot="scope">
								<el-input v-model="scope.row.valueColumn" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="显示列" prop="displayColumn" width="100">
							<template v-slot="scope">
								<el-input v-model="scope.row.displayColumn" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="where条件" prop="whereClause" width="300">
							<template v-slot="scope">
								<el-input v-model="scope.row.whereClause" size="mini" type="textarea"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="动态where条件" prop="dynamicWhereClause" width="300">
							<template v-slot="scope">
								<el-input v-model="scope.row.dynamicWhereClause" size="mini" type="textarea"></el-input>
							</template>
						</el-table-column>
						
					</el-table>
				</div>
			</el-tab-pane>
			<el-tab-pane label="验证规则" name="validationrule">
				<div style="border-bottom: 1px solid #DDD;">
					表验证规则
					<el-button size="mini" @click="onTableValidationRuleAddHandler">增加</el-button>
				</div>
				<div style="margin-top:10px;">
					<el-table stripe border show-overflow-tooltip="true" :data="tableValidationRuleList"
						style="width: 100%" size="mini">
						<el-table-column label="操作" width="50">
							<template #default="scope">
								<a @click="onTableValidationRuleDeleteHandler(scope.row)"
									style="display:inline-block;margin-left: 5px;" class="link-button">删除</a>
							</template>
						</el-table-column>
						<el-table-column label="名称" prop="validationRuleName" width="180">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationRuleName" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="规则" prop="validationRule" width="600">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationRule" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="出错消息" prop="validationRule" width="220">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationErrorMessage" size="mini"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div style="border-bottom: 1px solid #DDD;">
					列验证规则
					<el-button size="mini" @click="onColumnValidationRuleAddHandler">增加</el-button>
				</div>
				<div style="margin-top:10px;">
					<el-table stripe border show-overflow-tooltip="true" :data="columnValidationRuleList"
						style="width: 100%" size="mini">
						<el-table-column label="操作" width="50">
							<template #default="scope">
								<a @click="onColumnValidationRuleDeleteHandler(scope.row)"
									style="display:inline-block;margin-left: 5px;" class="link-button">删除</a>
							</template>
						</el-table-column>
						<el-table-column label="列" prop="columnName" width="180">
							<template v-slot="scope">
								<el-select placeholder="请选择" v-model="scope.row.columnName" clearable filterable
									size="mini">
									<el-option v-for="item in columnList" :key="item.columnName" :label="item.name"
										:value="item.columnName">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="名称" prop="validationRuleName" width="180">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationRuleName" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="规则" prop="validationRule" width="600">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationRule" size="mini"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="出错消息" prop="validationRule" width="220">
							<template v-slot="scope">
								<el-input v-model="scope.row.validationErrorMessage" size="mini"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
			<el-tab-pane label="业务逻辑" name="businesslogic">
				<el-row>
					<el-col :span="12">
						<el-card>
							<div>beforeInsert</div>
							<el-input type="textarea" v-model="tableCRUDRule.beforeInsert" rows="6"/>
						</el-card>	
					</el-col>
					<el-col :span="12">
						<el-card>
							<div>beforeUpdate</div>
							<el-input type="textarea" v-model="tableCRUDRule.beforeUpdate" rows="6"/>
						</el-card>	
					</el-col>
				</el-row>
				<el-row>	
					<el-col :span="12">
						<el-card>
							<div>beforeDelete</div>
							<el-input type="textarea" v-model="tableCRUDRule.beforeDelete" rows="6"/>
						</el-card>	
					</el-col>
					<el-col :span="12">
						<el-card>
							<div>afterInsert</div>
							<el-input type="textarea" v-model="tableCRUDRule.afterInsert" rows="6"/>
						</el-card>	
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px;">
					<el-col :span="12">
						<el-card>
							<div>afterUpdate</div>
							<el-input type="textarea" v-model="tableCRUDRule.afterUpdate" rows="6"/>
						</el-card>	
					</el-col>
					<el-col :span="12">
						<el-card>
							<div>afterDelete</div>
							<el-input type="textarea" v-model="tableCRUDRule.afterDelete" rows="6"/>
						</el-card>	
					</el-col>
				</el-row>
				<el-row>	
					<el-col :span="12">
						<el-card>
							<div>Select</div>
							<el-input type="textarea" v-model="tableCRUDRule.Select" rows="6"/>
						</el-card>	
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="权限" name="permission">
				<div>
					<el-button size="mini" @click="onModelAccessSaveHandler">保存</el-button>
					<el-button size="mini" @click="onModelAccessNewHandler">新建</el-button>
				</div>
				<div style="margin-top: 10px;">
					<el-table stripe border show-overflow-tooltip="true" :data="modelAccessList"
						style="width: 100%" size="mini">
						<el-table-column label="操作" width="50">
							<template #default="scope">
								<a @click="onModelAccessDeleteHandler(scope.row)"
									style="display:inline-block;margin-left: 5px;" class="link-button">删除</a>
							</template>
						</el-table-column>
						<el-table-column label="角色" prop="role" width="180">
							<template v-slot="scope">
								<el-select placeholder="请选择" v-model="scope.row.resRoleId" clearable filterable
									size="mini">
									<el-option v-for="item in roleList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="查看" prop="permSelect">
							<template v-slot="scope">
								<el-switch v-model="scope.row.permSelect" size="mini"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="插入" prop="permInsert">
							<template v-slot="scope">
								<el-switch v-model="scope.row.permInsert" size="mini"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="更新" prop="permUpdate">
							<template v-slot="scope">
								<el-switch v-model="scope.row.permUpdate" size="mini"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="删除" prop="permDelete">
							<template v-slot="scope">
								<el-switch v-model="scope.row.permDelete" size="mini"></el-switch>
							</template>
						</el-table-column>
					</el-table>	
				</div>
			</el-tab-pane>
			<el-tab-pane label="SQL" name="sql" v-if="moduleType=='view'">
				<div>SQL</div>
				<el-input type="textarea" v-model="sql" rows="6"/>
			</el-tab-pane>
			<el-tab-pane label="生成代码" name="code">
				<el-row style="margin-top: 10px;">
					<el-col :span="8" style="text-align: right;padding-right: 10px;"><label>生成Model</label></el-col>
					<el-col :span="16">
						<el-checkbox size="small" v-model="generateModel"></el-checkbox>
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px;">
					<el-col :span="8" style="text-align: right;padding-right: 10px;"><label>生成DAO</label></el-col>
					<el-col :span="16">
						<el-checkbox size="small" v-model="generateDAO"></el-checkbox>
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px;">
					<el-col :span="8" style="text-align: right;padding-right: 10px;"><label>生成Service</label></el-col>
					<el-col :span="16">
						<el-checkbox size="small" v-model="generateService"></el-checkbox>
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px;">
					<el-col :span="8" style="text-align: right;padding-right: 10px;"><label>&nbsp;</label></el-col>
					<el-col :span="16">
						<el-button size="small" type="primary" @click="generateCode">生成代码</el-button>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import constants from '@/utils/constants.js';
	import shareData from '@/utils/shareData.js';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "ModelFormPage",
		props: ["paraMap"],
		components: {},
		data() {
			return {
				buttonItems: [{
						"label": "保存",
						"icon": "el-icon-folder-remove",
						"commandName":"save"
					},
					{
						"label": "导出",
						"icon": "el-icon-folder-remove",
						"commandName":"export"
					},
					{
						"label": "同步表",
						"icon": "el-icon-folder-remove",
						"commandName":"syncTable"
					}
				],
				tableList: [],
				tableName: "",
				name: "",
				packageName: "",
				extendsTable: "",
				abstractTable: false,
				view: false,
				auto: true,
				sql:"",
				accessType: "mybatis",
				accessTypeList: [{
						"value": "mybatis",
						"name": "Mybatis"
					},
					{
						"value": "db",
						"name": "数据库"
					}
				],
				currentTableName: "",
				activeName: "column",
				columnList: [],
				sqlTypeList: [{
						value: "char",
						name: "char"
					},
					{
						value: "text",
						name: "text"
					}
				],
				dataTypeList: [],
				dictList: [],
				tableValidationRuleList: [],
				columnValidationRuleList: [],
				tableCRUDRule: {},
				modelAccessList:[],
				roleList:[],
				generateModel: true,
				generateDAO: true,
				generateService: true,
				moduleType:"table",
			}
		},
		mounted() {
			this.currentTableName = this.paraMap["tableName"];
			this.columnViewTypeList = shareData.columnViewTypeList;
			this.dataTypeList = shareData.dataTypeList;
			this.init();
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"webide/modelformpage/init?tableName=" + this.currentTableName).then(
					function(response) {
						if (response.data.code == 1) {
							that.tableList = response.data.tableList;
                            that.dictList=response.data.dictList;
							that.roleList=response.data.roleList;
							var tableObj = response.data.tableMap;
							that.tableName = tableObj.tableName;
							that.name = tableObj.name;
							that.moduleType=response.data.moduleType;
							var jsonContent = tableObj.jsonContent;
							if (jsonContent != null) {
								var obj = JSON.parse(jsonContent);
								that.packageName = obj.packageName;
								that.extendsTable = obj.extendsTable;
								that.abstractTable = obj.abstractTable;
								that.view = obj.view;
								that.auto = obj.auto;
								that.sql=obj.sql;
								that.accessType = obj.accessType;
								if (obj.tableValidationRuleList == undefined) {
									that.tableValidationRuleList = [];
								} else {
									that.tableValidationRuleList = obj.tableValidationRuleList;
								}
								that.tableCRUDRule = obj.tableCRUDRule;
								if (that.tableCRUDRule == undefined) {
									that.tableCRUDRule = {};
								}
								var columnList = obj.columnList;
								if (columnList == null) {
									columnList = [];
								}
								for (var i = 0; i < columnList.length; i++) {
									var columnObj = columnList[i];
									var validationRuleList = columnObj.validationRuleList;
									if (validationRuleList != undefined) {
										for (var j = 0; j < validationRuleList.length; j++) {
											var rule = validationRuleList[j];
											rule["columnName"] = columnObj["columnName"];
											that.columnValidationRuleList.push(rule);
										}
									}
									if(columnObj.storeColumn==undefined){
										columnObj.storeColumn=true;
									}
									columnObj.validationRuleList = [];
								}
								that.columnList = columnList;
							} else {
								that.columnList = [];
							}
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onColumnNewClickHander() {
				this.columnList.push({});
			},
			onColumnDeleteHandler(row) {
				for (var i = 0; i < this.columnList.length; i++) {
					if (this.columnList[i].columnName == row.columnName) {
						this.columnList.splice(i, 1);
						break;
					}
				}
			},
			onTableValidationRuleAddHandler() {
				this.tableValidationRuleList.push({});
			},
			onTableValidationRuleDeleteHandler(row) {
				for (var i = 0; i < this.tableValidationRuleList.length; i++) {
					if (this.tableValidationRuleList[i].validationRuleName == row.validationRuleName &&
						this.tableValidationRuleList[i].validationRule == row.validationRule) {
						this.tableValidationRuleList.splice(i, 1);
						break;
					}
				}
			},
			onColumnValidationRuleAddHandler() {
				this.columnValidationRuleList.push({});
			},
			onColumnValidationRuleDeleteHandler(row) {
				for (var i = 0; i < this.columnValidationRuleList.length; i++) {
					if (this.columnValidationRuleList[i].columnName == row.columnName &&
						this.columnValidationRuleList[i].validationRuleName == row.validationRuleName &&
						this.columnValidationRuleList[i].validationRule == row.validationRule) {
						this.columnValidationRuleList.splice(i, 1);
						break;
					}
				}
			},onToolbarClickHandler(item){
				if(item.commandName=="save"){
					this.dataSave();
				}else if(item.commandName=="export"){
					this.dataExport();
				}else if(item.commandName=="syncTable"){
					this.syncTable();
				}
			},dataSave() {
				for(var i=0;i<this.columnList.length;i++){
					var column=this.columnList[i];
					var rule=[];
					for(var j=0;j<this.columnValidationRuleList.length;j++){
						if(this.columnValidationRuleList[j].columnName==column.columnName){
							rule.push(this.columnValidationRuleList[j]);
						}
					}
					column.validationRuleList=rule;
				}
				var requestObj = {};
				requestObj.tableName = this.tableName;
				requestObj.name = this.name;
				requestObj.packageName = this.packageName;
				requestObj.extendsTable = this.extendsTable;
				requestObj.abstractTable = this.abstractTable;
				requestObj.view = this.view;
				requestObj.auto = this.auto;
				requestObj.sql=this.sql;
				requestObj.accessType = this.accessType;
				requestObj.columnList = this.columnList;
				requestObj.tableValidationRuleList = this.tableValidationRuleList;
				requestObj.tableCRUDRule = this.tableCRUDRule;
				var jsonContent = JSON.stringify(requestObj);
				requestObj.jsonContent = jsonContent;
				var that = this;
				restUtil.postAction(this,"webide/modelformpage/dataSave", requestObj, null).then(
					function(response) {
						var data = response.data;
						if (data.code == 1) {
							that.$alert("保存成功", '提示');
						}
					});
			},onModelAccessNewHandler(){
				this.modelAccessList.push({});
			},onModelAccessDeleteHandler(row){
				for(var i=0;i<this.modelAccessList.length;i++){
					if(this.modelAccessList[i].resRoleId==row.resRoleId){
						this.modelAccessList.splice(i,1);
						break;
					}
				}
			},onModelAccessSaveHandler(){
				var requestObject={};
				requestObject["modelAccessList"]=this.modelAccessList;
				requestObject["tableName"]=this.currentTableName;
				var that=this;
				restUtil.postAction(this,"webide/modelformpage/modelAccessSave", requestObject, null).then(
					function(response) {
						var data = response.data;
						if (data.code == 1) {
							that.$alert("保存成功", '提示');
						}
					});
			},dataExport() {
				let a = document.createElement('a')
				a.href = constants.ROOT_URL + "webide/modelformpage/dataExport?tableName=" + this.tableName +
					"&X-Token=" + window.localStorage.getItem("token");
				a.target = "_blank";
				a.click();
			},syncTable() {
				var that = this;
				restUtil.postAction(this,"webide/modelformpage/syncTable?tableName=" + this.tableName).then(
					function(response) {
						var data = response.data;
						if (data.code == 1) {
							that.$alert("操作成功", '提示');
						}
					});
			},generateCode(){
				var that = this;
				restUtil.postAction(this,"webide/modelformpage/generateCode",{
					tableName:that.tableName,
					generateModel:that.generateModel,
					generateDAO:that.generateDAO,
					generateService:that.generateService,
				}).then(
					function(response) {
						if (response.data.code == 1) {
							that.$alert("生成目录"+response.data.folderName, '提示')
						} else {
							that.$alert(response.data.message, '提示')
						}
				});
			}
		},
	}
</script>

<style>
</style>
